<template>
    <div>
        <a-table
            :labelWrap="true"
            ::label-col="{width:'10px'}"
            :columns="columns"
            :data-source="data.list"
            class="table"
            :pagination="paginationSet"
        >
        </a-table>
        <div class="table-page-search-wrapper">2345</div>
    </div>
</template>

<script setup lang="ts">
import { useApi } from '@/api/index';
import {
    message,
    TableColumnsType,
    TablePaginationConfig
} from 'ant-design-vue';

import { h, reactive, ref } from 'vue';
const api = useApi();

getdata(1, 10);

const data = ref<FormListData<RepairList>>({
    total: 1000,
    current: 1,
    pageSize: 10,
    list: []
});
async function getdata(
    current: number,
    pageSize: number
): Promise<FormListData<RepairList>> {
    const data1 = await api.repairList<FormListData<RepairList>>({
        page: current,
        size: pageSize
    });
    console.log('======= data =======\n', data1);
    data.value = data1;
    paginationSet.total = data1.total;
    return data1;
}

const paginationSet: TablePaginationConfig = reactive({
    // ... 初始化你的分页配置
    total: 1000,
    current: 1,
    pageSize: 10,

    position: ['bottomCenter'],
    // showTotal: total => `共 ${total} 条数据`,
    // showSizeChanger: true,
    pageSizeOptions: ['10', '15', '20'],
    onChange: (current, pageSize) => {
        //对其分页防抖
        getdata(current, pageSize);
        paginationSet.current = current;
        message.success('点击了');
    },

    onShowSizeChange(current, pageSize) {
        paginationSet.pageSize = pageSize; // 修改每页显示的条数
        paginationSet.current = 1;
    }
});

const columns: TableColumnsType = [
    {
        title: '时间',
        dataIndex: 'id',
        key: 'id',
        align: 'center'
    },
    {
        title: '全部',
        dataIndex: 'faultArea',
        key: 'faultArea',

        align: 'center'
    },
    {
        title: '待审核',
        dataIndex: 'faultAddress',
        key: 'faultAddress',

        align: 'center'
    },
    {
        title: '待处理',
        dataIndex: 'phoneNumber',
        key: 'phoneNumber',

        align: 'center'
    },
    {
        title: '待派工',
        dataIndex: 'repairProject',
        key: 'repairProject',
        align: 'center'
    },
    {
        title: '待完工',
        dataIndex: 'undertakingUnit',
        key: 'undertakingUnit',
        width: 150,
        align: 'center'
    },
    {
        title: '维修中',
        dataIndex: 'billingAddress',
        key: 'billingAddress',
        width: 150,
        align: 'center'
    },
    {
        title: ' 待回访',
        dataIndex: 'faultDescription',
        key: 'faultDescription',
        width: 150,
        align: 'center',
        ellipsis: true
    },
    {
        title: '已评价',
        dataIndex: 'faultPhotos',
        key: 'faultPhotos',
        width: 50,
        align: 'center',
        ellipsis: true,
        customRender: ({ text, record, index, column }) => {
            const imgSrc = import.meta.env.VITE_APP_BASE_API + text;

            return h('img', { attrs: { src: imgSrc } });
        }
    },
    {
        title: '已回访',
        dataIndex: 'repairPhotos',
        key: 'repairPhotos',
        width: 50,
        align: 'center',
        ellipsis: true,
        customRender: ({ text, record, index, column }) => {
            const imgSrc = import.meta.env.VITE_APP_BASE_API + text;
            return h('img', { attrs: { src: imgSrc } });
        }
    },
    {
        title: '已驳回  ',
        dataIndex: 'createTime',
        key: 'createTime',

        align: 'center'
    },
    {
        title: '已暂停',
        dataIndex: 'updateTime',
        key: 'updateTime',

        align: 'center'
    }
];
</script>

<style lang="scss" scoped>
@import '@/assets/style/tableDeep.scss';
.table {
    width: 96%;
    height: 100%;
    margin: 10px auto;
    height: 50vh;
    overflow: scroll;

    //布局
    :deep(.ant-layout) {
        display: inline;
    }
}
</style>
